Day4 練習製作簡易待辦事項清單(上)

2024 iThome 鐵人賽

DAY 4

JavaScript

每天都進步一點！從零開始的JavaScript 與基礎網路知識學習系列第 4 篇

16th鐵人賽

karin0720

2024-09-04 17:40:53

107 瀏覽

分享至

今天是第四天，來繼續跟著影片練習製作簡易待辦事項清單，藉此了解更多的語法：
HTML語法

ul 清單
li 清單內子項目
input 建立輸入欄位；placeholder輸入欄中提示文字
button 新增按鈕元素

<!DOCTYPE html>
<html>
<head> 
    <title> 待辦事項 </title>
</head>
<body>
    <input class="word" placeholder="新增項目"> 
    <button class="botan">+</button>
    <ul class="list">
    </ul>
    <script src="script.js"></script>
</body>
</html>

JS語法

.textContent 取得物件的文字內容
.addEventListener("keyup") 偵測keyup(按下按件後放開)的動作 ("click"偵測點擊)
.key 回傳用戶按下的鍵名(此處-若用戶按下Enter，顯示文字欄中的文字)
document.createElement("li") 在網頁中插入新的html標籤(如li)

const words=document.querySelector(".word")
const lists=document.querySelector(".list")
const botan=document.querySelector(".botan")

function newtask(){
    if (words.value===" "){ //若輸入為空白則跳過
        return;
    }
    const task=document.createElement("li");
    task.textContent=words.value; //task的內容為用戶在文字欄中輸入的文字
    lists.append(task); //把新輸入的task放到清單的底部
    words.value=" "; //清空文字欄
}
botan.addEventListener("click",newtask);
words.addEventListener("keyup",function(keyname){
    if(keyname.key==="Enter"){
        newtask();
    }
    }
);

成果
成果圖
注意：此處的待辦事項清單內容無儲存功能，網頁重整或關閉後記錄就會消失。